<!--我的关注-->
<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="我的关注" name="first">
        <el-row v-for="t in attention" :key="attention.tid"  style="border-bottom: #cccccc solid 1px;margin-top: 20px" >
          <el-col :span="2"><div class="grid-content bg-purple">
            <div class="demo-image">
              <div class="block ">
                <el-avatar  class="img" :src="t.t_image"></el-avatar>
              </div>
            </div>
          </div></el-col>
          <el-col :span="14">
            <div class="mz">
            {{t.t_name}}
          </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="float: right">
            <div style="margin: 10px;">
              <el-button type="danger" plain @click="handleRedirect(t.tid)">进入主页</el-button>
            </div>
            <div style="margin: 10px;">
              <el-button type="warning" plain @click="quxiao(t.tid)">取消关注</el-button>
            </div>
          </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "Attention",
  data() {
    return {
      uid:'',
      activeName: 'first',
      /*关注信息*/
      attention: []
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRedirect(){
      this.$router.push({
        path:"/teachercenter"
      });
    },
    //查询
    query(){
      this.$axios.get("teacher-front/demo/teacher-collection/queryByid?uid="+this.uid).then(r=>{
        alert(JSON.stringify(r.data))
          this.attention=r.data;
      })
    },
    handleRedirect(row){
      this.$router.push({
        path: '/teachercenter',
        query: {
          tid: row
        }
      })
    },
    quxiao(tid){
      this.$axios.get("teacher-front/demo/teacher-collection/updBytid?tid="+tid+"&uid="+this.uid).then(r=>{
        if(r.data==1){
          this.$message.success("取消成功");
          this.query();
        }
      })
    }

  },
  mounted() {
    let item = sessionStorage.getItem("uid");
    this.uid=item;
    this.query();
  }
}
</script>

<style>
  .img{
    width: 125px;
    height: 125px;
    border-radius: 50%;
    box-shadow: 2px 2px 5px ;
  }
  .mz{

    width: 50px;
    margin-left: 50px;
  }
  /*.block{*/

    /*width: 125px;*/
    /*border-radius: 50%;*/
    /*box-shadow: 2px 2px 5px darkslateblue;*/
  /*}*/
/*.grid-content {*/
  /*border: 1px solid red;*/
  /*min-height: 36px;*/
/*}*/
</style>
